<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el和data的两种写法</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root"><h1>{{name}}</h1></div>

<script>
    const v = new Vue({
        // el: '#root',

        // 对象式写法
        // data: {
        //     name: '曾宇杰',
        // }

        //函数式
        data: function () {
            //这个函数的this指向是vue实例对象
            return {
                name: '曾宇杰'
            }
        }
    })
    console.log(v)

    // 可以使用$mount()指定容器代替el
    v.$mount('#root')

    /**
     * 容器绑定的两种写法
     *      el:'CSS选择器'
     *      v.$mount('CSS选择器')
     *
     * 数据绑定的两种写法
     *      对象式 : data:{}
     *      函数式 : data:function (){}  后期学到组件时必须要使用函数式,否则会报错
     */
</script>
</body>
</html>